<template>
  <div class="return-premium">
    <el-row :gutter="10">
      <el-col :span="12">
        <AElFormRex :data="form" :disabled="loading" @change="change" :rows="2" />
      </el-col>
      <el-col :span="12">
        <el-button :loading="loading" type="primary" icon="el-icon-search" @click="getData">查询</el-button>
        <el-button :loading="loading" v-show="selectData.length" type="danger" @click="returnPremium">退费</el-button>
      </el-col>
    </el-row>
    <AElTable v-loading="loading" :data="data" :columns="columns" max-height="600px"
      @selection-change="selectionChange">
      <AElPagination slot="pagination" :disabled="loading" :pageSize="pageSize" @change="pageChange" />
    </AElTable>
    <el-dialog center title="退费提示" :visible.sync="visible" width="30%">
      <span class="return-premium-tips">确定退费吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setBatchRefund, getBatchRefundList } from '@/api/returnPremium';
export default {
  name: 'Premium',
  data() {
    return {
      loading: false, // 查询列表加载效果
      visible: false, // 是否显示弹窗
      formData: {}, // 表单数据
      form: {}, // 表单
      data: [], // 表格数据
      columns: [], // 表格配置
      selectData: [], // 表格复选框选中数据
      pageSize: {
        page: 1,
        size: 10,
        total: 0
      },// 分页配置
    }
  },
  created() {
    this.getData();
    this.setForm();
    this.setColumns();
  },
  methods: {
    /**
     * 退费按钮操作
     */
    returnPremium() {
      this.visible = true;
    },
    /**
     * 表单内容发生改变时
     */
    change(form = {}) {
      this.formData = form;
      this.pageChange({ page: 1 });
      this.getData();
    },
    /**
     * 分页发生改变时
     */
    pageChange(pageSize = {}) {
      this.pageSize = { ...this.pageSize, ...pageSize };
      this.getData();
    },
    /**
     * 提交
     */
    submit() {
      let adviceIds = this.selectData.map(item => item.hisAdviceId);
      this.loading = true;
      let form = { adviceIds };
      setBatchRefund(form).then(() => {
        this.getData();
        this.visible = false;
      }).finally(() => {
        this.loading = false;
      })
    },
    /**
     * 表格复选框事件
     */
    selectionChange(data) {
      this.selectData = data;
    },
    /**
     * 配置表单
     */
    setForm() {
      this.form = {
        patientName: { label: "患者姓名", clearable: true },
        // BinAnH: { label: "病案号" },
        // YuYueSJ: {
        //     label: "预约时间",
        //     type: "date",
        // },
        adviceStates: {
          label: "退费状态",
          type: "select",
          clearable: true,
          children: [
            {
              label: "未提交",
              value: "0"
            },
            {
              label: "已提交",
              value: "1"
            },
            {
              label: "已签署",
              value: "2"
            },
            {
              label: "执行中",
              value: "3"
            },
            {
              label: "已完成",
              value: "4"
            },
            {
              label: "已作废",
              value: "5"
            },
            {
              label: "退费完成",
              value: "6"
            }
          ]
        },
      }
    },
    /**
     * 配置表格
     */
    setColumns() {
      this.columns = [
        {
          type: "selection",
          selectable: function ({ adviceStates = "0" }) {
            return ["1", "2", "3"].some(item => item == adviceStates);
          }
        },
        // { label: "医嘱ID", prop: "YiZhuID" },
        // { label: "医嘱名称", prop: "YiZhuMC" },
        // { label: "预约时间", prop: "YuYueSJ" },
        // { label: "预约次数", prop: "YuYueCS" },
        // { label: "申请单ID", prop: "ShenQingDID" },
        // { label: "治疗项目ID", prop: "ZhiLiaoXMID" },
        { label: "治疗项目名称", prop: "treatmentName" },
        { label: "可退数量", prop: "refundNum" },
        // { label: "开单机构ID", prop: "KaiDanJGID" },
        // { label: "开单机构名称", prop: "KaiDanJGMC" },
        // { label: "开单科室ID", prop: "KaiDanKSID" },
        // { label: "开单科室名称", prop: "KaiDanKSMC" },
        // { label: "执行机构ID", prop: "ZhiXingJGID" },
        // { label: "执行机构名称", prop: "ZhiXingJGMC" },
        // { label: "执行科室ID", prop: "ZhiXinKSID" },
        // { label: "执行科室名称", prop: "ZhiXinKSMC" },
        // { label: "退费人ID", prop: "TuiFeiRID" },
        { label: "患者姓名", prop: "patientName" },
        // { label: "病案号", prop: "TuiFeiRXM" },
        {
          label: "退费状态", prop: "adviceStates",
          render: ({ row: { adviceStates = 0 } }) => {
            switch (adviceStates) {
              case 0: return <span style="color:red">未提交</span>;
              case 1: return <span style="color:#999">已提交</span>;
              case 2: return <span style="color:#666">已签署</span>;
              case 3: return <span style="color:#409eff">执行中</span>;
              case 4: return <span style="color:#e6a23c">已完成</span>;
              case 5: return <span style="color:#ccc">已作废</span>;
              case 6: return <span style="color:green">退费完成</span>;
            }
          }
        },
      ]
    },
    /**
     * 获取数据
     */
    getData() {
      let { total, ...rest } = this.pageSize;
      let form = { ...rest, ...this.formData };
      this.loading = true;
      getBatchRefundList(form).then(({ content = [], totalElements = 0 }) => {
        this.data = content;
        this.pageSize.total = totalElements;
      }).finally(() => this.loading = false);
    }
  }
}
</script>

<style lang="scss">
.return-premium {
  padding: 15px;

  .el-dialog__body {
    padding: 0 20px;
  }

  .return-premium-tips {
    color: rgb(226, 29, 29);
    font-weight: bold;
  }
}
</style>
